<template>
  <div id="news">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="news_title">最新发布</span>
      </div>
      <div v-for="o in news" :key="o.id" class="text item">
        <span @click="news_detail(o)">📖&nbsp;&nbsp;&nbsp;&nbsp;{{ o.title }}</span>
      </div>
    </el-card>
    <el-drawer
      :title="title"
      v-if="drawer"
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose"
      size='50%'
    >
      <div v-html="body" style="height:1000px;width:100%;overflow:auto;padding:20px 150px"></div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      news: [],
      drawer: false,
      direction: 'rtl',
      title:'',
      body:{},
    }
  },
  created() {
    this.fetch_news()
  },
  methods: {
    async news_detail(o) {
      const res = await this.$http.get('fetch_news_id', {
        params: {
          id: o._id
        }
      })

      this.drawer = true
      console.log(res.data)
      this.title = res.data.title
      this.body = res.data.body
    },
    handleClose(done) {
          done();
    },
    async fetch_news() {
      const res = await this.$http.get('fetch_news')
      this.news = res.data
      //   console.log(res.data + '123')
    },
  }
}
</script>

<style>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
  cursor: pointer;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 1200px;
  margin-left: 20%;
  margin-top: 20px;
  margin-bottom: 20px;
}

.news_title {
  font-size: 20px;
  margin-left: 45%;
  font-weight: bold;
}

/* drawer的标题 */
.el-drawer__header>:first-child {
  font-size: 20px;
  text-align: center;
  font-weight: bold;
}
</style>